{% extends 'base.html' %}
{% load static %}

{% block index_js %}
	<script type="text/javascript">
        $(function () {
            var $upDateLi = $('.update-list li')

			$upDateLi.mouseover(function(){
				$(this).animate({'left':120*$(this).index()})
				$(this).prevAll().each(function(){
					$(this).animate({'left':120*$(this).index()})
				})
				$(this).nextAll().each(function(){
					$(this).animate({'left':1200-120*(5-$(this).index())})
				})
			})
			var $ClassifyLi = $('.classify-bar li')
			var $ClassifyUl = $('.classify-lists ul')

		})

    </script>
{#    第一个分类#}
{#	<script type="text/javascript">#}
{#        $(function(){#}
{#            var $ChinaList = $('#China li img')#}
{#            var $listCount = $ChinaList.length#}
{#            $.ajax({#}
{#                url: "/comicinfo/comicinfo/",#}
{#                type: "GET",#}
{#                dataType: "json"#}
{#          })#}
{##}
{##}
{#          .done(function(booksDate) {#}
{##}
{#              var $books = booksDate.slice(0,$listCount)#}
{##}
{#              $('#China li img').each(function(i){#}
{##}
{#                  $(this).prop({'src':$books[i].book_img})#}
{##}
{##}
{#              })#}
{##}
{##}
{#          })#}
{#                .fail(function () {#}
{#                  alert('失败')#}
{#              })#}
{#            var $upDateLi = $('.update-list li')#}
{##}
{#			$upDateLi.mouseover(function(){#}
{#				$(this).animate({'left':120*$(this).index()})#}
{#				$(this).prevAll().each(function(){#}
{#					$(this).animate({'left':120*$(this).index()})#}
{#				})#}
{#				$(this).nextAll().each(function(){#}
{#					$(this).animate({'left':1200-120*(5-$(this).index())})#}
{#				})#}
{#			})#}
{#			var $ClassifyLi = $('.classify-bar li')#}
{#			var $ClassifyUl = $('.classify-lists ul')#}
{##}
{#		})#}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{#        #}
{#	</script>#}
{#    第二个分类#}
{#    <script type="text/javascript">#}
{#     $(function () {#}
{#        var $JapanList = $('#Japan li img')#}
{#            var $listCount = $JapanList.length#}
{#            $.ajax({#}
{#                url: "/comicinfo/comicinfo/?kind=17",#}
{#                type: "GET",#}
{#                dataType: "json"#}
{#          })#}
{#          .done(function(booksDate) {#}
{##}
{#              var $books = booksDate.slice(0,$listCount)#}
{##}
{#              $('#Japan li img').each(function(i){#}
{##}
{#                  $(this).prop({'src':$books[i].book_img})#}
{#              })#}
{#          })#}
{#                .fail(function () {#}
{#                  alert('失败')#}
{#              })#}
{#     })#}
{#    </script>#}


{#    <script type="text/javascript">#}
{#     $(function () {#}
{#        var $USAList = $('#USA li img')#}
{#            var $listCount = $USAList.length#}
{#            $.ajax({#}
{#                url: "/comicinfo/comicinfo/",#}
{#                type: "GET",#}
{#                dataType: "json",#}
{#               #}
{#          })#}
{##}
{##}
{#          .done(function(booksDate) {#}
{#              alert(booksDate)#}
{#              var $books = booksDate.slice(0,$listCount)#}
{##}
{#              $('#USA li img').each(function(i){#}
{##}
{#                  $(this).prop({'src':$books[i].book_img})#}
{#              })#}
{#          })#}
{#                .fail(function () {#}
{#                  alert('失败')#}
{#              })#}
{#     })#}
{##}
{##}
{##}
{#    </script>#}
    <script type="text/javascript">
		$(function(){
			var ul = $('.country-zone .country-list')
			{#alert(ul.length)#}
			var iLeft = 0
			var iSpeed = -199.6
			var nowspeed = 0
			function move(){
				iLeft+=iSpeed
				ul.animate({'left':iLeft})
				if(iLeft<=-1197.6){
					iSpeed = 199.6
				}
				if(iLeft >= 0){
					iSpeed = -199.6
				}
			}
			setInterval(move,2000)
			ul.mouseover(function(){
				nowspeed = iSpeed
				iSpeed = 0
			})
			ul.mouseout(function(){
				iSpeed = nowspeed
			})

		})

	</script>
{#    <script type="text/javascript">#}
{#        $(function () {#}
{#            $('#login-button').click(function () {#}
{#                var username = $.trim($('#form-login #inputEmail3').val())#}
{#                var password = $.trim($('#form-login #inputPassword3').val())#}
{#                var data = {username:username,password:password}#}
{##}
{#                $.ajax({#}
{#                url:"/users/token/",#}
{#                type:"post",#}
{#                dataType:"json",#}
{#                data:data#}
{#            })#}
{#                .done(function (userdata) {#}
{#                    alert(userdata)#}
{#                    console.log(userdata)#}
{#                    window.location.reload()#}
{#                })#}
{#                .fail(function () {#}
{##}
{#                })#}
{#            })#}
{#            })#}
{#    </script>#}
{% endblock index_js%}

{% block content %}
<!--首页幻灯片样式-->
	<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="https://rs.sfacg.com/web/comic/images/homePush/2019/01/56bcf485-b086-433b-9fca-286e8e6c18dd_big.jpg" alt="First slide">
		</div>
		<div class="item">
			<img src="https://rs.sfacg.com/web/comic/images/homePush/2019/01/142c88c2-028f-4ed5-8e3b-00d7f1b0ae86_big.jpg" alt="Second slide">
		</div>
		<div class="item">
			<img src="https://rs.sfacg.com/web/comic/images/homePush/2019/01/142c88c2-028f-4ed5-8e3b-00d7f1b0ae86_big.jpg" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
    </div>
	<!--最近更新-->

	<!--手风琴样式-->
	<div class="update">
		<div id="" class="glyphicon glyphicon-time"></div>
		<span class="update-title">最新上架</span><a href="" class="update-link">更多 &gt;</a>
	</div>
	<ul class="update-list">
		{% for book in books|slice:'0:5' %}
		<li class="bar01"><a href="/single/{{ book.id }}"><img src="{{ book.book_img }}"/></a></li>
		{% endfor %}

{#		<li class="bar01"><img src="{{ MEDIA_URL }}images/a59b199b012645a8.jpg"/></li>#}
{#		<li class="bar02"><img src="{{ MEDIA_URL }}images/aad5c26fae614a98.jpg"/></li>#}
{#		<li class="bar03"><img src="{{ MEDIA_URL }}images/f4d4626d1d8d4496.jpg"/></li>#}
{#		<li class="bar04"><img src="{{ MEDIA_URL }}images/a59b199b012645a8.jpg"/></li>#}
{#		<li class="bar05"><img src="{{ MEDIA_URL }}images/f4d4626d1d8d4496.jpg"/></li>#}
	</ul>
	<!--热门漫画-->
	<div class="country-zone" id="China">
		<div class="country">
			<div class="glyphicon glyphicon-fire"></div>
			<span>本周热门</span>
		</div>
		<ul class="country-list">
			{% for book in books|slice:'20:32' %}
			<li><a href="/single/{{ book.id }}"><img src="{{ book.book_img }}" alt=""></a>
				<a href="/single/{{ book.id }}"><h5>{{ book.book_name }}</h5></a>
				<a href="/single/{{ book.id }}" class="btn btn-danger" role="button">开始阅读</a>
				<span style="font-size: 4px; display: inline-block; float: left; margin-left: 5px">阅读量:{{ book.popularity }}
					<br>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
				</span>

			</li>
			{% endfor %}
		</ul>
	</div>
	<!--本周推荐-->

	<div class="country">
		<div class="glyphicon glyphicon-thumbs-up"></div>
		<span>重磅推荐</span>
	</div>
	<div class="recommend clearfix">
		{% for book in books|slice:'9:12' %}
		<div class="recommend_box">
			<a href="/single/{{ book.id }}"><img src="{{ book.book_img }}" alt="..."></a>
			<div class="recommend_content">
				<h3 class="recommend-title"><a href="/single/{{ book.id }}">{{ book.book_name }}</a></h3>
				<p class="recommend_desc">{{ book.description }}</p>
				<p>
					<a href="/single/{{ book.id }}" class="btn btn-danger" role="button">开始阅读</a>
				</p>
			</div>
		</div>
		{% endfor %}
	</div>
	<!--热血动漫-->
	<div class="country-zone" id="Japan">
		<div class="country">
			<span>最燃动漫</span>
			<a href="/comicinfo/list/kind1" class="more-comic">更多</a>
		</div>
		<ul class="country-list">
			{% for book in passionate_books|slice:'6:18' %}
			<li><a href="/single/{{ book.id }}"><img src="{{ book.book_img }}" alt=""></a>
				<a href="/single/{{ book.id }}"><h5>{{ book.book_name }}</h5></a>
				<a href="/single/{{ book.id }}" class="btn btn-danger" role="button">开始阅读</a>
				<span style="font-size: 4px; display: inline-block; float: left; margin-left: 5px">阅读量:{{ book.popularity }}
					<br>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
				</span>
			</li>
			{% endfor %}
		</ul>
	</div>

	<!--所有漫画-->
	<div class="all-comic " id="#all">
		<div class="all-title">
			<span>所有漫画</span>
			<a href="/comicinfo/list/kind" class="more-comic">更多分类</a>
		</div>
		<ul class="all-list clearfix">
			{% for book in books %}
			<li>
				<a href="/single/{{ book.id }}"><img src="{{ book.book_img }}" alt=""></a>
				<a href="/single/{{ book.id }}"><h5>{{ book.book_name }}</h5></a>
				<a href="/single/{{ book.id }}" class="btn btn-danger" role="button">开始阅读</a>
				<span style="font-size: 4px; display: inline-block; float: left; margin-left: 5px">阅读量:{{ book.popularity }}
					<br>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
				</span>
			</li>
			{% endfor %}
		</ul>
	</div>
{% endblock %}